<template>
	<view class="index">
		<!-- logo -->
		<view class="navfixed">
			<view class="zw"></view>
			<view class="logobox">
				<image src="../../static/logo/logo.png"></image>
				<!-- #ifdef APP-PLUS -->
					<view class="scan" @click="scan">
						<u-icon name="scan" color="#666" size="50"></u-icon>
					</view>
				<!-- #endif -->
			</view>
		</view>
		<!-- 轮播图1 -->
		<view class="swiper-box">
			<swiper autoplay="true" circular="true">
				<swiper-item v-for="(item,index) in BannerList" @click="tapBanner(item.reurl)">
					<image :src="item.url" mode="aspectFill" class="simg" />
				</swiper-item>
				
			</swiper>
		</view>
 
		<!-- 分类列表 -->
		<view class="category-list">
			<view class="category" @click="navTo('/pages/live/watchLive','1')">
				<view class="img">
					<image src="/static/indexicon/t1.png" mode="aspectFill"></image>
				</view>
				<view class="text">直播</view>
			</view>
			<view class="category" @click="navTo('/pages/spell/spell','0')">
				<view class="img">
					<image src="/static/indexicon/t2.png" mode="aspectFill"></image>
				</view>
				<view class="text">拼团</view>
			</view>
			<view class="category" @click="navTo('/pages/index/sale/sale','0')">
				<view class="img">
					<image src="/static/indexicon/t3.png" mode="aspectFill"></image>
				</view>
				<view class="text">秒杀</view>
			</view>
			<view class="category" @click="navTo('/pages/bargain/bargain','0')">
				<view class="img">
					<image src="/static/indexicon/t4.png" mode="aspectFill"></image>
				</view>
				<view class="text">砍价</view>
			</view>
			<view class="category" @click="navTo('/pages/task/task','1')">
				<view class="img">
					<image src="/static/indexicon/t5.png" mode="aspectFill"></image>
				</view>
				<view class="text">VS</view>
			</view>
			<view class="category" @click="gomore(0)">
				<view class="img">
					<image src="/static/indexicon/t6.png" mode="aspectFill"></image>
				</view>
				<view class="text">会员产品</view>
			</view>
			<view class="category" @click="navTo('/pages/user/message/message','1')">
				<view class="img">
					<image src="/static/indexicon/t7.png" mode="aspectFill"></image>
				</view>
				<view class="text">在线留言</view>
			</view>
			<view class="category" @click="navTo('/pages/index/jianjie','0')">
				<view class="img">
					<image src="/static/indexicon/t9.png" mode="aspectFill"></image>
				</view>
				<view class="text">VS简介</view>
			</view>
		</view>
		<!-- 活动区 -->
		<view class="TITLE">活动区</view>
		<view>
			<view class="active">
				<view class="active-box" style="margin-right: 10rpx;" @click="navTo('/pages/index/sale/sale','0')">
					<view class="active-title">秒杀专区</view>
					<view class="active-hint">精品限时秒</view>
					<view class="i-box i-box1">
						<view class="active-img">
							<image src="../../static/index.png" mode="widthFix" style="width: 30%;"></image>
						</view>
						<view class="active-img">
							<image src="../../static/index2.png" mode="widthFix" style="width: 60%;"></image>
						</view>
					</view>
				</view>
				<view class="active-box" style="background: linear-gradient(0deg, rgba(225, 237, 226, 0.89), rgba(255, 255, 255, 0.89));" @click="navTo('/pages/spell/spell','3')">
					<view class="active-title">特价专区</view>
					<view class="active-hint">高品质生活</view>
					<view class="i-box i-box1">
						<view class="active-img">
							<image src="../../static/index3.png" mode="widthFix" style="width: 70%;"></image>
						</view>
						<view class="active-img">
							<image src="../../static/index4.png" mode="widthFix" style="width: 70%;"></image>
						</view>
					</view>
				</view>
				<view class=" active-box1" style="margin-right: 10rpx; background: linear-gradient(0deg, rgba(249, 241, 220, 0.89), rgba(255, 255, 255, 0.89));" @click="navTo('/pages/bargain/bargain','0')">
					<view class="active-title">砍价专区</view>
					<view class="active-hint">白菜价好物</view>
					<view class="i-box">
						<view class="active-img">
							<image src="../../static/index5.png" mode="widthFix" style="width: 100%;"></image>
						</view>
					</view>
					
				</view>
				<view class=" active-box1" style="margin-right: 10rpx;background: linear-gradient(0deg, rgba(242, 240, 250, 0.89), rgba(255, 255, 255, 0.89));" @click="navTo('/pages/spell/spell','0')">
					<view class="active-title">拼团专区</view>
					<view class="active-hint">好物一起拼</view>
					<view class="i-box">
						<view class="active-img" style="width: 70%;">
							<image src="../../static/index6.png" mode="widthFix" style="width:100%;"></image>
						</view>
					</view>
					
				</view>
				<view class=" active-box1" style="background: linear-gradient(0deg, rgba(254, 249, 249, 0.89), rgba(255, 255, 255, 0.89));" @click="navTo('/pages/spell/spell','2')">
					<view class="active-title">广告中心</view>
					<view class="active-hint">实时查阅广告</view>
					<view class="i-box">
						<view class="active-img">
							<image src="../../static/index7.png" mode="widthFix" style="width: 100%;"></image>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<!--  会员产品区-->
		<view class="vip-product">
			<view class="TITLE">会员产品区</view>
			<view @click="gomore(0)">查看更多</view>
		</view>
		
		<view class="goods-box">
			<view class="goodsitem" v-for="(item,index) in vipGoodList" @click="toproduct(item.goodsId,'1')">
				<image :src="item.goodsImage" mode="aspectFill" class="goodsimg"></image>
				<view class="goodsname">{{item.goodsName}}</view>
				<view class="price">
					<text>￥{{item.goodsMoney}}</text>
					<text class="payfor">{{item.goodsSales}}付款</text>
				</view>
			</view>
			
		</view>
		<view class="vip-product">
			<view class="TITLE">推荐产品</view>
			<view @click="gomore(1)">查看更多</view>
		</view>
		<view class="goods-box">
			<view class="goodsitem" v-for="(item,index) in pointGoodList" @click="toyunproduct(item.goodsId,'2')">
				<image :src="item.goodsImage" mode="aspectFill" class="goodsimg"></image>
				<view class="goodsname">{{item.goodsName}}</view>
				<view class="price">
					<text>{{item.goodsMoney}}积分</text>
					<text class="payfor">{{item.goodsSales}}付款</text>
				</view>
			</view>
			
		</view>
	</view>
</template>
<script>
	import {getbanner,shopData} from"../../api/index.js"
	export default {
		components: {},
		data() {
			return {
				BannerList:[],
				vipGoodList:[],
				pointGoodList:[]
			};
		},
		// 
		onLoad() {
			this.getbanner(),
			this.getvipGoods(),
			this.getpointGoods()
		},
		onShow() {},

		//下拉刷新
		onPullDownRefresh() {},
		methods: {
			tapBanner(url){
				uni.navigateTo({
					url:"/pages/index/webView?url="+url
				})
			},
			// 扫码
			scan(){
				uni.scanCode({
					onlyFromCamera: true,
				    success:(res)=>{
				        console.log('条码内容：' + res.result);
						// #ifndef H5
						let url=res.result.split("#")[1]
						uni.navigateTo({
							url:url
						})
						// #endif
				    }
				});
			},
			//查看更多会员商品
			gomore(e){
				// 0查看会员产品 1 查看推荐产品
				if(e==0){
					uni.navigateTo({
						url:"/pages/product/productlist?type=1"
					})
				}else{
					uni.navigateTo({
						url:"/pages/product/productlist?type=2"
					})
				}
			},
			// 去普通商品详情
			toproduct(id,type){
				// type=0 //0正常商品 1 会员产品 2推荐产品  4抢购商品 5 拼团商品
				uni.navigateTo({
					url:"/pages/product/detail?id="+id+"&type="+type
				})
			},
			// 去积分商品
			toyunproduct(id,type){
				uni.navigateTo({
					url:"/pages/product/detail?id="+id+"&type="+type
				})
			},
			// 获取轮播图
			async getbanner(){
				let res=await this.get(getbanner)
				console.log("轮播",res);
				this.BannerList=res.data;
			},
			//会员商品接口
			getvipGoods(){
				this.get(shopData,{type:0,pageNum:1,pageSize:4}).then(r=>{
					console.log(r);
					this.vipGoodList=r.data.list;
				})
			},
			//推荐商品接口
			getpointGoods(){
				this.get(shopData,{type:1,pageNum:1,pageSize:4}).then(p=>{
					console.log("p",p);
					this.pointGoodList=p.data.list;
				})
			},
			// 统一跳转
			navTo(url,type){
				// type=0 不要登录 1 需要登录
				if(type==0){
					uni.navigateTo({
						url:url
					})
				}else if(type==1){
					if(this.Md.islogin()){
						uni.navigateTo({
							url:url
						})
					}
				}else if(type==3){
					this.msg("暂无特价商品...","none")
				}else if(type==2){
					this.msg("即将开放...","none")
				}
			},
			// 
		}
	}
</script>
<style scoped>
	.scan{
		position: absolute;
		right: 30rpx;
		bottom: 20rpx;
	}
	.zw{
		height:var(--status-bar-height);
		width: 100%;
	}
	.index{
		padding-top:calc(110rpx + var(--status-bar-height));
	}
	.navfixed{
		background-color: #FFFFFF;
		position:fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
	}
	.vip-product{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 750rpx;
		padding-right: 30rpx;
	}
	.payfor{
		color: #666666;
		font-size: 24rpx;
	}
	.price{
		display: flex;
		justify-content: space-between;
		height: 80rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #F0812D;
		opacity: 1;
		padding: 0 20rpx;

		
	}
	.goodsname{
		height:80rpx ;
		font-size: 26rpx;
		margin-top: 10rpx;
		line-height: 40rpx;
		color: #000000;
		padding: 0 10rpx;
		box-sizing: border-box;
		width: 340rpx;
		display: -webkit-box;/*将对象作为弹性伸缩盒子模型显示*/
		overflow: hidden; /* 超出的文本隐藏 */
		text-overflow: ellipsis;/* 溢出用省略号显示 */
		word-wrap: break-word;/* 文本高出宽度换行 */
		white-space: normal !important;/* 溢出不换行 */
		-webkit-line-clamp: 2;/* 表示显示的行数 */
		-webkit-box-orient: vertical;/* 从上到下垂直排列子元素 */

	}
	.goodsimg{
		width: 340rpx;
		height:310rpx ;
		display: block;
		
	}
	.goodsitem{
		width:340rpx;
		height: 480rpx;
		margin-right: 10rpx;
		border-radius:14rpx ;
		overflow: hidden;
		box-shadow: 12rpx 0rpx 17rpx rgba(4, 0, 0, 0.08);
		margin-bottom: 14rpx;
	}
	.goods-box{
		width: 750rpx;
		padding: 0 0 0 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
	}
	.i-box{
		display: flex;
		justify-content: center;
		position: relative;
		top: 20rpx;
	}
	.i-box1{
		position: relative;
		top: 40rpx;
	}
	.active-img{
		width: 50%;
		height: 150rpx;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		/* position: relative;
		top: 40rpx; */
	}
	
	.active-box1{
		width:223rpx ;
		height: 270rpx;
		border-radius: 10rpx;
	}
	.active-title{
		height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 56rpx;
		color: #000000;
		opacity: 1;
		padding: 20rpx 0 0 40rpx;

	}
	.active-hint{
		height: 33rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 41rpx;
		color: #9A9A9A;
		opacity: 1;
		padding: 20rpx 0 0 40rpx;
	}
	.active-box{
		width: 340rpx;
		height: 288rpx;
		border-radius: 10rpx;
	}
	.active{
		padding: 0 30rpx;
		display: flex;
		flex-wrap: wrap;
	}
	.TITLE {
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 40rpx;
		color: #333333;
		opacity: 1;
		padding-left: 50rpx;
		margin: 40rpx 0;
	}

	.text {
		text-align: center;
		margin-top: 10rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #333;
	}

	.img {
		display: flex;
		justify-content: center;
		height: 92rpx;
	}

	.img>image {
		width: 90rpx;
		height: 90rpx;
		/* border: 100rpx; */
	}

	.category {
		width: 187rpx;
		margin-bottom: 30rpx;
	}

	.category-list {
		padding: 50rpx 0 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	swiper-item {
		display: flex;
		justify-content: center;
	}

	.simg {
		width: 690rpx;
		height: 320rpx;
		border-radius: 12rpx;
	}

	swiper {
		width: 100%;
		height: 320rpx;
	}

	.swiper-box {
		width: 100%;
		height: 320rpx;
	}

	.logobox {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx;
		position: relative;
	}

	.logobox>image {
		width: 64rpx;
		height: 64rpx;
	}
</style>
